<template>
  <div class="credit-guide">
    <div v-if="showGuide">
      <p class="gc-top_title">
        您还未认证企业
      </p>
      <p class="gc-top_title">
        <img src="../../assets/bussiness/guide_certify.png" alt="">
      </p>
      <p class="gc-mid_title">
        认证企业成功后即可帮您锁定最适合您的贷款产品！
      </p>
      <p class="gc-middle_title">
        <span>在认证过程中如需帮助，请联系客服</span>
        <span class="com-phone">服务热线：{{kfPhone}}</span>
      </p>
      <p class="gc-middle_title gc-bot_title">
        <el-button @click="beginCredit" type="warning" style="width: 200px" class="base-btn apply-btn">立即认证</el-button>
      </p>
      <p class="gc-middle_title gc-bottom_title">
        <a @click="goSelectBank">暂不认证，先看看贷款产品</a>
      </p>
    </div>

    <smrz v-on:smrz="handlerSmrz" v-else></smrz>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {assistantApprove} from '../../api/tszs/tszs';

import smrz from "../common/zt/smrz";

export default {
  name: "lltSmrz",
  data(){
    return{
      kfPhone:process.env.LLT_KF_PHONE,
      showGuide: true,
      smrzUrl:''
    }
  },
  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  components:{
    smrz
  },
  methods: {
    handlerSmrz(event) {
      let _ = this;
      let loginAccount = this.user.user.loginAccount?this.user.user.loginAccount:'';
      assistantApprove({
        uscCode:event.uscCode,
        companyName:event.tenantName,
        loginAccount:loginAccount
      }).then(res=>{
        if(res.code===200){
          _.$emit('llt-smrz',{
            uscCode:event.uscCode,
            tenantName:event.tenantName
          });
        }
      });
    },
    goSelectBank() {
      this.$router.push({
        path: '/productList'
      });
    },
    beginCredit() {
      this.showGuide = false;
    }
  }
}
</script>
<style lang="scss">
.credit-guide {
  .gc-top_title {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
  }

  .gc-top_title:first-child {
    margin-top: 60px;
  }

  .gc-mid_title {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }

  .gc-middle_title {
    text-align: center;
    font-size: 14px;

    .com-phone {
      color: #FFA01D;
      padding-left: 20px;
    }
  }

  .gc-bot_title {
    margin-top: 56px;
  }

  .gc-bottom_title {
    font-size: 12px;
    color: #FFA01D;
  }
}
</style>
